import React, { Component } from 'react'
import { connect } from 'react-redux'
import { WhiteSpace, List, WingBlank, Card, InputItem, DatePicker, TextareaItem, Steps ,Button} from 'antd-mobile'
import TitleNavBar from '@/common/components/displays/TitleNavBar'
import { Link } from 'react-router-dom'
import { createForm } from 'rc-form';

import '@/common/style/ui.less'
import '@/common/style/AppliesComapply.less'

const Item = List.Item;
const Brief = Item.Brief;
const Step = Steps.Step;
class AppliesComapply extends Component {
    constructor(props) {
        super(props)
        this.state = {
            date: "",
            titleData: {
                title: "Back",
                centerTitle: "Talent Apply",
                rightTitle: ""
            },
            itemData: [
                {
                    id: 1,
                    name: "TelanName",
                    time: "2 weeks",
                    extraData: "",
                    thumb: "https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                },
                {
                    id: 2,
                    name: "TelanName",
                    time: "2 weeks",
                    extraData: "",
                    thumb: "https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                }
            ]
        }
    }
    linkHandle() {
        this.props.history.push("/talant/info/2");
    }
    render() {
        const { getFieldProps } = this.props.form;
        return (
            <div className="applies-container">
                <TitleNavBar titleData={this.state.titleData} Drawerstatus={false}/>
                <WhiteSpace />
                <List renderHeader={() => <h4>Info</h4>} className="applylistparams">
                    <InputItem
                        placeholder="Agency"
                        ref={el => this.labelFocusInst = el}
                    ><div>Agency</div></InputItem>
                    <DatePicker
                        value={this.state.date}
                        onChange={date => this.setState({ date })}
                        extra="2018/11/2"
                        format="YYYY-MM-DD"
                        mode="date"
                    >
                        <List.Item arrow="horizontal">Creat Date</List.Item>
                    </DatePicker>
                    <TextareaItem
                        {...getFieldProps('count', {
                            initialValue: 'Cover',
                        })}
                        autoHeight
                    />
                </List>
                <List renderHeader={() => <h4>Apply Flow</h4>} className="Stepcontainer">
                    <Steps size="small" current={1}>
                        <Step title="Finished" description="This is description" />
                        <Step title="In Progress" description="This is description" />
                        <Step title="Waiting" description="This is description" />
                    </Steps>
                </List>
                <List renderHeader={() => <h4>My Approval</h4>} className="Approvalcontainer">
                    <InputItem
                        placeholder="Agency"
                        clear
                        labelNumber={10}
                        ref={el => this.labelFocusInst = el}
                    ><div>Approval Result</div></InputItem>
                    <InputItem
                        placeholder="Agency"
                        labelNumber={10}
                        clear
                        ref={el => this.labelFocusInst = el}
                    ><div>Approval Reason</div></InputItem>
                </List>
                <WhiteSpace />
                <WhiteSpace />
                <Button style={{
                    background: "#c085da",
                    width: "215px",
                    height: "35px",
                    color: "#fff",
                    lineHeight: "35px",
                    borderRadius: "15px",
                    left:"75px"
                }}>Apply</Button>
            </div>
        )
    }
}

function mapStateToProps(state, ownProps) {
    return {

    }
}
const TextareaItemExampleWrapper = createForm()(AppliesComapply);
export default connect(mapStateToProps)(TextareaItemExampleWrapper);
